<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>填写资料</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta name="msapplication-tap-highlinght" content="no" />
    <script type="text/javascript" src="/static/js/jquery190.js"></script>
    <style type="text/css">
        html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, ins, s, strong, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, footer, header, menu, section, input{margin: 0; padding: 0; border: none; font-size: 100%; font: inherit; font-family: Arial, 微软雅黑; vertical-align: baseline; tap-highlight-color: transparent; -ms-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;}
        input, select, textarea{font-size: 100%; outline: none; border: none; background: none;}
        a{text-decoration: none;}
        ol, ul, li{list-style: none;}
        .clearfix{*zoom: 1; display: block;}
        .clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
        .clear{clear: both;}
        html{height: 100%; background: url(/static/images/hallbg.jpg) no-repeat center bottom,url(/static/images/bg.jpg) repeat-y; background-size: 100% auto; line-height: 1;}
        /*顶部标题*/
        .header img{display: block; width: 40.44vw; height: auto; margin: 9.244vw auto 7.733vw;}
        /*填写表单*/
        #fillOut li{font-size: 4.8vw; color: #fff; font-weight: bold; margin-left: 16vw;}
        #fillOut li:nth-child(even){margin-bottom: 3.644vw;}
        #fillOut li:nth-child(odd){margin-bottom: 4.8vw;}
        #fillOut li:first-child{margin-bottom: 5.688vw;}
        #fillOut li:last-child{margin-bottom: 2.666vw;}
        #fillOut li span{color: rgb(255, 0, 0); display: inline-block; margin-right: 0.5vw;}
        #fillOut li input{width: 80%; height: 12.5vw; background: url(/static/images/input_box.png) no-repeat; background-size: 100% auto; border-radius: 9vw; font-size: 4.8vw; text-indent: 5vw; color: #fff;}
        /*确认按钮*/
        #fillOut input#confirm{display: block; width: 31.37vw; height: 11.91vw; margin: auto; background: url(/static/images/confirm_btn.png) no-repeat; background-size: 100%;}
        /*错误提示*/
        #fillOut div.tip{color: rgb(248, 48, 48); text-align: center; font-size: 4.27vw; margin-bottom: 1.69vw; height: 4.27vw;}
        #fillOut div.tip p{display: none;}
        /*ipad*/
        @media screen and (min-width: 450px){
            #fillOut li{font-size: 4vw;}
        }
    </style>
</head>
<body>
	<div class="wrap clearfix">
		<div class="header">
            <img src="/static/images/rechSuc.png" alt=""/>
		</div>
        <form action="{$formurl}" method="post" id="fillOut">
            <ul>
                <li>请登记您的资料</li>
                <li><span>*</span>姓名</li>
                <li><input type="text" name="username" value=""/></li>
                <li><span>*</span>联系电话</li>
                <li><input type="text" name="phone" value="" maxlength="11"/></li>
                <li>推荐码</li>
                <li><input type="text" name="referrercode" value="" maxlength="6"/></li>
            </ul>
            <div class="tip"><p></p></div>
            <input type="submit" id="confirm" value=""/>
        </form>
	</div>
</body>
<script>
    $(function(){
        // 姓名 20个字符（中英文）
        $('input[name=username]').keyup(function(){
            if(/[^\a-zA-Z\u4E00-\u9FA5]/.test($(this).val())){
                var res=$(this).val().replace(/[^\a-zA-Z\u4E00-\u9FA5]/g,'');
                $(this).val(res);
            }
            var a = $(this).val();
            if(a.gblen() > 20){
                $(".tip p").text('已超出长度').show();
            }else{
                $(".tip p").hide();
            }
        });

        // 联系电话 11个字符（数字）
        $('input[name=phone]').keyup(function(){
            if(/[^\d]/.test($(this).val())){
                var res=$(this).val().replace(/[^\d]/g,'');
                $(this).val(res);
            }
        });
        // 推荐人 6个字符（数字+英文）
        $('input[name=referrer]').keyup(function(){
            if(/[\W]/.test($(this).val())){
                var res=$(this).val().replace(/[\W]/g,'');
                $(this).val(res);
            }
        });
        // 确认按钮  检查信息
        $('#confirm').click(function(){
            var username = $('input[name=username]').val();
            var phone = $('input[name=phone]').val();
            var referrer = $('input[name=referrer]').val();
            if( username == '' || phone == '' ){
                $(".tip p").text('请检查资料是否有误').show();
                return false;
            }else if(!isMobile(phone)){
                $(".tip p").text('电话号码格式错误').show();
                return false;
            }else if(username.gblen() > 20){
                $(".tip p").text('姓名由汉字、字母组成的20个字符').show();
                return false;
            }
        });
        $("#fillOut input").blur(function(){
            $(".tip p").hide();
        });
        //校验手机号码：必须以数字开头
        function isMobile(s){
            var patrn=/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|17[0-9]{9}$|18[0-9]{9}$/;
            if(!patrn.exec(s)){
                return false;
            }
            return true;
        }
        // 校验中文字符串长度
        String.prototype.gblen = function(){
            var len = 0;
            for(var i=0; i<this.length; i++){
                if(this.charCodeAt(i)>127 || this.charCodeAt(i)==94){
                    len += 2;
                }else{
                    len ++;
                }
            }
            return len;
        }
    });
</script>
</html>